<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">

<!--头部导航栏信息-->
<header th:fragment="nav">
    <!--导航部分  begin-->
    <div class="container" style="margin-top: 5px;">
        <nav class="navbar navbar-default well-sm" style="padding-left: 0px;" role="navigation">
            <div class="container-fluid">
                <div class="navbar-header">
                    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#example-navbar-collapse">
                        <span class="sr-only">切换导航</span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                    </button>
                    <a class="navbar-brand" href="#" th:href="@{/book/index}">淘淘书城</a>
                </div>
                <div class="collapse navbar-collapse" id="example-navbar-collapse">
                    <ul class="nav navbar-nav pull-left">
                        <li>
                            <a th:href="@{/book/index}">首页</a>
                        </li>

                        <li>
                        <li class="dropdown">
                            <a href="#" class="dropdown-toggle" data-toggle="dropdown">
                                图书类型
                                <b class="caret"></b>
                            </a>
                            <ul class="dropdown-menu">
                                <li>
                                    <a th:href="@{/book/bookList(category=1)}">精选图书</a>
                                </li>
                                <li class="divider"></li>
                                <li>
                                    <a th:href="@{/book/bookList(category=2)}">推荐图书</a>
                                </li>
                                <li class="divider"></li>
                                <li>
                                    <a th:href="@{/book/bookList(category=3)}">特价图书</a>
                                </li>
                                <li class="divider"></li>
                            </ul>
                        </li>
                        </li>
                        <li th:if="${session.user == null}">
                            <a href="#" data-toggle="modal" data-target="#loginModal">登录</a>
                        </li>
                        <li th:if="${session.user != null}">
                            <a href="javascript:void(0)" th:text="${session.user.username}">用户名</a>
                        </li>
                        <li th:if="${session.user != null}">
                            <a th:href="@{/user/logout}">安全退出</a>
                        </li>
                        <li th:if="${session.user == null}">
                            <a href="#" data-toggle="modal" data-target="#registerModel">注册</a>
                        </li>
                        <li>
                            <a th:href="@{/order/list}" href="order_list.html">我的订单</a>
                        </li>
                        <li>
                            <a th:href="@{/cart/list}"><span class="glyphicon glyphicon-shopping-cart"> </span>我的购物车</a>
                        </li>
                    </ul>
                    <form th:action="@{/book/search}" th:method="post" onsubmit="return search();">
                        <div class="input-group col-md-3 pull-right" style="positon:relative;padding: 7px;">
                                <input type="text" id="bookName" name="bookName" class="form-control" placeholder="请输入图书名" />
                                <span class="input-group-btn">
                                    <button type="submit" class="btn btn-info btn-search">
                                        <span class="glyphicon glyphicon-search"></span>
                                    </button>
                                </span>
                        </div>
                    </form>
                </div>
            </div>
        </nav>
    </div>
    <!--导航部分 end-->
</header>

<!--中间轮播图部分-->
<article th:fragment="carousel">
    <!--最顶端轮播图片 begin-->
    <div id="gcarouse" class="container">
        <!--轮播-->
        <div id="myCarousel" class="carousel slide">
            <!-- 轮播（Carousel）指标 -->
            <ol class="carousel-indicators">
                <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
                <li data-target="#myCarousel" data-slide-to="1"></li>
                <li data-target="#myCarousel" data-slide-to="2"></li>
            </ol>
            <!-- 轮播（Carousel）项目 -->
            <div class="carousel-inner">
                <div class="item active">
                    <a th:href="@{/book/bookList(category=1)}"><img th:src="@{/images/advert1.jpg}" class="pull-left" alt="First slide"></a>

                </div>
                <div class="item">
                    <a th:href="@{/book/bookList(category=2)}"><img th:src="@{/images/advert2.jpg}" class="pull-left" alt="First slide"></a>

                </div>
                <div class="item">
                    <a th:href="@{/book/bookList(category=3)}"><img th:src="@{/images/advert3.jpg}" class="pull-left" alt="First slide"></a>

                </div>
            </div>

            <!-- 轮播（Carousel）导航 -->
            <a class="carousel-control left" href="#myCarousel" data-slide="prev">&lsaquo;</a>
            <a class="carousel-control right" href="#myCarousel" data-slide="next">&rsaquo;</a>
        </div>
    </div>
    <!--最顶端轮播图片 end-->
</article>

<!--底部信息栏-->
<footer th:fragment="footer">
    <!--首页底部信息 begin-->
    <div class="container">
        <div class="row">
            <div class="col-md-offset-2 col-md-8">
                <div class="row">
                    <div class="col-md-offset-2 col-md-2">
                        <img th:src="@{/images/book.png}">
                    </div>
                    <div class="col-md-6" style="margin-top: 10px;">
                        <div class="row">
                            <div class="col-md-offset-2 col-md-10">
                                <a href="#">买书就上淘淘书城</a>
                            </div>
                        </div>
                        <div class="gap"></div>
                        <div class="row">
                            <div class="col-md-offset-2 col-md-10">
                                <span class="text-info"><a href="#">淘淘书城</a> |&nbsp;</span>
                                <span class="text-info">2018－2021 </span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</footer>